import { h, GraphModel, NodeConfig } from '@logicflow/core'
import { RectResize } from '@logicflow/extension'
import { nodeStyleHandle } from '../tool'
/**
 * 自定义节点
 */
class CustomModel extends RectResize.model {
  static extendKey = 'CustomModel';
  constructor (data: NodeConfig, graphModel: GraphModel) {
    super(data, graphModel)
    if (data.properties) {
      this.width = (data.properties.width ? data.properties.width : 120) as number
      this.height = (data.properties.height ? data.properties.height : 80) as number
    }
  }

  getNodeStyle ():{
    [x: string]: any;
    width?: number;
    height?: number;
    radius?: number;
    fill?: string;
    stroke?: string;
    strokeWidth?: number;
    } {
    const style = super.getNodeStyle()
    return nodeStyleHandle(this, style)
  }
}

class CustomView extends RectResize.view {
  static extendKey = 'CustomNode';
  getLabelShape (): h.JSX.Element {
    const { model } = this.props
    const { x, y, width, height } = model
    const style = model.getNodeStyle()
    return h(
      'svg',
      {
        x: x - width / 2 + 5,
        y: y - height / 2 + 5,
        width: 20,
        height: 20,
        viewBox: '0 0 1024 1024'
      },
      h('path', {
        fill: style.stroke,
        d: 'M732.8 486l201.6-191.4c40.3-40.3 40.3-105.5 0-145.8l-50.3-50.3C844.6 59 780.8 58.2 740.3 96.6l-197 187L352 79.2l-1.6-1.6c-26.2-26.4-68.8-26.7-95.2-0.5L111.5 220.8c-25.6 25.7-26.1 67.3-1.1 93.7l188.5 201.4-178.3 169.2c-14.5 13.8-24.7 31.7-29.4 51.3L61.1 865c-8.6 36.7 14.3 73.3 50.9 81.9 11.4 2.6 23.3 2.3 34.7-0.9l123.9-36.5c15.7-4.6 30-12.9 41.9-24.1l175.6-167 211.6 226.3 1.6 1.6c26.2 26.4 68.8 26.7 95.2 0.5l143.6-143.6c25.6-25.7 26.1-67.3 1.1-93.7l-208.6-223 0.2-0.5zM309.2 796.5l-93.6-93.6c-3-2.7-6.4-4.9-10.2-6.5l465.2-441.9 98 97.7c1.6 1.3 3.2 2.4 5 3.3l-464.4 441z m476.8-652c14.4-13.6 37-13.4 51 0.7l50.3 50.3c14.3 14.4 14.2 37.6-0.2 52l-0.5 0.5-66.9 63.6c-1.1-2.3-2.5-4.5-4.2-6.5l-97-97 67.5-63.6zM277.1 395.1c8.6-0.1 16.8-3.5 23-9.6l49.9-49.9c12.9-12.9 12.9-34 0-47-12.9-12.9-34-12.9-47 0l-50 49.8c-5.5 5.7-8.8 13.2-9.3 21.1L159 269c-0.6-0.6-0.6-1-0.3-1.3l143.5-143.6s0.7 0 1.3 0.5l191.6 204.7L347 469.9l-69.9-74.8zM128 881.8c-0.9 0.2-1.8-0.2-2.1-1.1-0.1-0.3-0.1-0.6 0-0.9l30.2-128.6c1-4.1 2.9-8.1 5.3-11.7 1.6 3.9 4 7.6 7.1 10.5l91.8 91.8c-2.6 1.6-5.4 2.9-8.4 3.7l-124 36.5 0.1-0.2z m621.8 17.3s-0.7 0-1.3-0.5l-130.6-139c5.5-1.4 10.5-4.1 14.6-8l49.9-49.9c12.9-12.9 12.9-34 0-47s-34-12.9-47 0l-49.9 49.9c-3.4 3.5-6 7.7-7.6 12.4l-41.4-44.4L684.6 532 893 754.6c0.6 0.6 0.6 1 0.3 1.3L749.8 899.5v-0.4z'
      })
    )
  }

  getResizeShape (): h.JSX.Element {
    const { model } = this.props
    const { x, y, width, height, radius } = model
    const style = model.getNodeStyle()
    return h('g', {}, [
      h('rect', {
        x: x - width / 2,
        y: y - height / 2,
        rx: radius,
        ry: radius,
        width,
        height,
        ...style
      }),
      this.getLabelShape()
    ])
  }
}

const Custom = {
  type: 'snaker:custom',
  view: CustomView,
  model: CustomModel
}

export { CustomView, CustomModel }
export default Custom
